<template>
  <SearchCollapse :mixHeight="32">
    <el-form ref="searchRef" :inline="true" :model="formData">
      <el-form-item label="标题" prop="title">
        <el-input v-model="formData.title"></el-input>
      </el-form-item>
      <el-form-item label="首页投放" prop="state">
        <el-select v-model="formData.state">
          <el-option label="投放" value="1" />
          <el-option label="下架" value="0" />
        </el-select>
      </el-form-item>
      <el-form-item label="广告类型" prop="type">
        <el-select v-model="formData.type">
          <el-option
            v-for="item in getBannerTypeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <template #control>
      <el-button
        type="primary"
        :icon="Search"
        :loading="props.isLoading"
        @click="handleClickSearch"
        >查询</el-button
      >
      <PipeResetBtn :formEl="searchRef" @clear="handleClickSearch"
        >取消</PipeResetBtn
      >
    </template>
  </SearchCollapse>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import { Search } from '@element-plus/icons-vue';
import type { ElForm } from 'element-plus';
import { GetStateOptions } from '@/utils/common';

// 轮播图类型
const getBannerTypeOptions = GetStateOptions('banner-type');

// 表单ref
const searchRef = ref<InstanceType<typeof ElForm>>();

// 查询数据
const formData = reactive({
  title: '',
  type: '',
  state: ''
});

// props
const props = defineProps({
  isLoading: {
    type: Boolean,
    default: false
  }
});

// emits
const emits = defineEmits(['onSearch']);

// 搜索
const handleClickSearch = () => {
  // 获取查询条件
  const dataOpt: any = {};
  for (const [key, val] of Object.entries(formData)) {
    if (val) dataOpt[key] = val;
  }

  emits('onSearch', dataOpt);
};
</script>
